<template>
  <div class="father">
	<pre>  自定义事件常用于：子 => 父 通过defineEmits可以让子组件的值传递到父组件中。
  1.先在子组件中用defineEmits([...emitName])定义一个或多个emit，它的返回值是一个emits函数，然后可以通过调用emits函数向父组件发射时间，并携带参数。
  2.在父组件中通过@符 + 事件名监听子组件发射出来的事件，并接收其传过来的值。</pre>
    <h3>父组件</h3>
		<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
		<!-- 给子组件Child绑定事件 -->
    <Child @send-toy="saveToy"/>
  </div>
</template>

<script setup lang="ts" name="Father">
  import Child from './Child.vue'
	import { ref } from "vue";
	// 数据
	let toy = ref('')
	// 用于保存传递过来的玩具
	function saveToy(value:string){
		console.log('saveToy',value)
		toy.value = value
	}
</script>

<style scoped>
	.father{
		background-color:rgb(165, 164, 164);
		padding: 20px;
    border-radius: 10px;
	}
	.father button{
		margin-right: 5px;
	}
</style>